<template>
  <!-- 淘宝买家秀卡片列表组件 -->
  <view class="list-taoShow">

    <com-empty v-if="isEmpty && !isLoading" />

    <view v-else>
      <view v-for="(item, index) in dataList" :key="item._id" class="item">
        <view @click="onPreview(index)" class="pic">
          <image class="image" :src="item.url" lazy-load mode="widthFix" />
        </view>

        <view class="content">
          <text>{{ item.comment }}</text>
        </view>

        <view class="author">
          <text>————{{ item.shop }}</text>
        </view>
      </view>

      <com-loadFooter :isHide="false" :isHasMore="isHasMore" :isLoading="isLoading"></com-loadFooter>

    </view>
  </view>
</template>


<script setup>
const props = defineProps({
  // 数据列表
  dataList: {
    type: Array,
  },
  // 是否正在加载状态
  isLoading: {
    type: Boolean,
  },
  // 是否还有更多数据
  isHasMore: {
    type: Boolean,
  },
  // 数据是否为空
  isEmpty: {
    type: Boolean,
  }
});

// 查看大图
const onPreview = (index) => {
  console.log(`~~~从第 ${index + 1} 张图片开始预览`);
  let urlList = props.dataList.map(item => item.url);
  uni.previewImage({
    current: index,
    urls: urlList,
    showmenu: true
  })
}
</script>


<style lang="scss" scoped>
@use 'style.scss';
</style>